<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';
import type { BasicOption } from '@vben/types';

import { computed, markRaw } from 'vue';

import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useAuthStore } from '#/store';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();

const MOCK_USER_OPTIONS: BasicOption[] = [
  {
    label: 'Super',
    value: 'vben',
  },
  {
    label: 'Admin',
    value: 'admin',
  },
  {
    label: 'User',
    value: 'jack',
  },
];

const formSchema = computed((): VbenFormSchema[] => {
  return [
    // {
    //   component: 'VbenSelect',  // 使用选择器组件
    //   componentProps: {
    //     options: MOCK_USER_OPTIONS,
    //     placeholder: $t('authentication.selectAccount'),
    //   },
    //   fieldName: 'selectAccount',
    //   label: $t('authentication.selectAccount'),
    //   rules: z
    //     .string()
    //     .min(1, { message: $t('authentication.selectAccount') })
    //     .optional()
    //     .default('vben'),
    // },
    {
      component: 'VbenInput', // 使用 Vben 输入框组件
      componentProps: {
        // 组件属性
        placeholder: $t('authentication.usernameTip'), // 输入框占位符
      },
      // dependencies: {
      //   trigger(values, form) {
      //     // 当 selectAccount 变化时触发
      //     if (values.selectAccount) {
      //       // 根据选择的值自动填充用户名和密码
      //       const findUser = MOCK_USER_OPTIONS.find(
      //         (item) => item.value === values.selectAccount,
      //       );
      //       if (findUser) {
      //         form.setValues({
      //           password: '123456', // 注意：此处存在安全隐患
      //           username: findUser.value, // 自动填充用户名
      //         });
      //       }
      //     }
      //   },
      //   triggerFields: ['selectAccount'], // 监听的字段（当前被注释）
      // },
      fieldName: 'userName', // 表单字段名（需要与 dependencies 对应）
      label: $t('authentication.username'), // 标签文本，使用国际化
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }), // 非空验证
    },
    {
      component: 'VbenInputPassword', // 密码输入组件
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'passWord', // 字段名称
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },

    // {
    //   component: markRaw(SliderCaptcha),
    //   fieldName: 'captcha', // 字段名称
    //   rules: z.boolean().refine((value) => value, {
    //     message: $t('authentication.verifyRequiredTip'),
    //   }),
    // },
  ];
});
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :show-qrcode-login="false"
    :show-register="false"
    :show-forget-password="false"
    :show-third-party-login="false"
    :loading="authStore.loginLoading"
    @submit="authStore.authLogin"
  />
</template>
